<template>
  <div class="small-card-container br-5" :style="{ background: bgColor || '#fff' }">
    <div class="left">
      <div class="title">{{ title }}</div>
      <count-to class="count" :endVal="endVal" :prefix="prefix || ''"></count-to>
      <div class="compare">
        <svg-icon :icon-class="isUp ? 'up-red' : 'down-green'"></svg-icon>
        <span>{{ percentNum }}%較上月</span>
      </div>
    </div>
    <svg-icon :icon-class="iconClass"></svg-icon>
  </div>
</template>

<script>
import countTo from 'vue-count-to'

export default {
  name: 'index',
  components: { countTo },
  props: ['bgColor', 'title', 'endVal', 'isUp', 'percentNum', 'iconClass', 'prefix']
}
</script>

<style scoped lang="less">
.small-card-container {
  padding: 14px 22px 14px 18px;
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
  align-items: start;
  .left {
    .title {
      font-size: 14px;
      color: rgba(0, 0, 0, 0.5);
      line-height: 17px;
      margin-bottom: 9px;
    }
    .count {
      font-size: 24px;
      line-height: 29px;
      margin-bottom: 13px;
    }
    .compare {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      > .svg-icon {
        font-size: 16px;
        margin-right: 7px;
      }
      span {
        font-size: 14px;
        color: rgba(0, 0, 0, 0.4);
        line-height: 17px;
      }
    }
  }
  > .svg-icon {
    font-size: 42px;
  }
}
</style>
